<template>
  <div>
    <nav class="top-navbar">
      <ul>
        <li><router-link to="/">首页</router-link></li>
        <li><router-link to="/production">制作播发</router-link></li>
        <li><router-link to="/scheduling">调度控制</router-link></li>
        <li><router-link to="/operations">运维管理</router-link></li>
        <li><router-link to="/security">安全服务</router-link></li>
        <li><router-link to="/emergency">应急指挥</router-link></li>
      </ul>
    </nav>
    <nav class="side-navbar">
      <ul>
        <li><router-link to="/info-access">信息接入</router-link></li>
        <li><router-link to="/info-processing">信息处理</router-link></li>
        <li @click="toggleInfoProduction">
          <span>信息制作</span>
          <ul v-if="showInfoProduction">
            <li><router-link to="/text-production">文本制作</router-link></li>
            <li><router-link to="/audio-production">音频制播</router-link></li>
            <li><router-link to="/video-production">视频制播</router-link></li>
            <li><router-link to="/live-production">直播内制作设置</router-link></li>
          </ul>
        </li>
        <li><router-link to="/asset-management">媒资管理</router-link></li>
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      showInfoProduction: false
    };
  },
  methods: {
    toggleInfoProduction() {
      this.showInfoProduction = !this.showInfoProduction;
    }
  }
}
</script>

<style scoped>
.top-navbar {
  background-color: #333;
  overflow: hidden;
}

.top-navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.top-navbar li {
  flex: 1;
}

.top-navbar a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.top-navbar a:hover {
  background-color: #575757;
}

.side-navbar {
  background-color: #444;
  overflow: hidden;
  width: 200px;
  position: fixed;
  height: 100%;
}

.side-navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.side-navbar li {
  padding: 8px;
}

.side-navbar a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 8px 16px;
}

.side-navbar a:hover {
  background-color: #575757;
}

.side-navbar ul ul {
  display: none;
  position: relative;
  left: 200px;
  top: -32px; /* Adjust based on your design */
  background-color: #555;
}

.side-navbar ul li:hover ul {
  display: block;
}

.side-navbar span {
  color: white;
  padding: 8px 16px;
  display: block;
  cursor: pointer;
}
</style>